import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Tooltip } from 'antd';
import { querySystemWarningHistory } from '../service';
import type { SystemWarningHistroyTableItem } from '../typings';

const WarningHistoryList = () => {
  const columns: ProColumns<SystemWarningHistroyTableItem>[] = [
    {
      title: 'id',
      dataIndex: '_id',
      hideInTable: true,
      hideInSearch: true,
    },
    {
      title: '告警类型',
      width: 100,
      dataIndex: 'warningType',
      align: 'center',
      valueEnum: {
        iotSimExpired: '流量卡过期',
      },
    },
    {
      title: '告警规则名称',
      width: 100,
      dataIndex: 'warningRuleName',
      align: 'center',
    },
    {
      title: '告警内容',
      width: 320,
      dataIndex: 'warningContent',
      hideInSearch: true,
      render: (_, record) => (
        <Tooltip title={record.warningContent}>
          <div
            style={{
              maxWidth: '50vw',
              textOverflow: 'ellipsis',
              overflow: 'hidden',
              whiteSpace: 'nowrap',
            }}
          >
            {record.warningContent}
          </div>
        </Tooltip>
      ),
    },
    {
      title: '告警时间',
      width: 280,
      dataIndex: 'createTime',
      hideInSearch: true,
      align: 'center',
      valueType: 'dateTime',
    },
  ];
  return (
    <PageHeaderWrapper title={false} content="告警记录列表">
      <ProTable<SystemWarningHistroyTableItem>
        rowKey="_id"
        columns={columns}
        scroll={{ x: true }}
        search={{ labelWidth: 'auto' }}
        style={{ whiteSpace: 'nowrap' }}
        pagination={{
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        request={async (params, sort) => querySystemWarningHistory(params, sort)}
      />
    </PageHeaderWrapper>
  );
};

export default WarningHistoryList;
